<template>
  <div class="pagination">
    <el-pagination
      popper-class="paginations"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script>
export default {
  props: {
    pageNum: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 15
    },
    total: {
      type: Number,
      default: 0
    },
    pageSizes:{
      type: Array,
      default: () =>[10, 20, 50, 100]
    }
  },
  data() {
    return {};
  },
  methods: {
    // 改变页面的size
    handleSizeChange(size) {
      this.$emit("size-change", size);
    },
    // 改变当前页面
    handleCurrentChange(page) {
      this.$emit("page-change", page);
    }
  }
};
</script>

<style>
.pagination .el-pagination .el-select .el-input .el-input__inner,
.pagination .el-pagination__editor.el-input .el-input__inner {
  background: transparent;
  color: #333;
  border: 1px solid #ccc;
  height: 34px;
  line-height: 34px;
}
.pagination{
  text-align: right;
  margin-top: 20px;
  height: 46px;
} 
.pagination .el-pager {
  margin: 0 5px;
}
.el-pager li.active + li {
  border-left: 1px solid #ccc!important;
}
.pagination .el-pager li {
  background: transparent;
  margin: 0 5px;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 34px;
  line-height: 34px;
}
.pagination .el-pager li.active {
  border: 1px solid #69a1d1;
}
.pagination .el-pagination .btn-next,
.pagination .el-pagination .btn-prev {
  background: transparent;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 34px;
  line-height: 34px;
}
.pagination .el-pagination .btn-next {
  padding-left: 6px;
}
.pagination .el-pagination .btn-prev {
  padding-right: 6px;
}
.el-pagination span:not([class*="suffix"]) {
  height: 34px;
  line-height: 34px;
  color: #333;
  vertical-align: baseline!important;
}
.pagination .el-pagination button:disabled {
  background: transparent;
  cursor: not-allowed;
  color: #333;
}
.pagination .el-pagination__total,
.pagination .el-pagination__jump {
  color: #f0f0f0;
}
.pagination .el-select .el-input .el-select__caret {
  color: #333;
  line-height: 34px;
}
.pagination .el-pagination button:hover {
  background: 3e94f6;
  color: #333;
}
.pagination .el-pager li:hover {
  border: 1px solid #69a1d1;
}
.paginations .el-select-dropdown__item.selected {
  color: #206bff;
}
</style>
